{% extends "base.html" %}
{% load humanize %}

{% block content %}
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        最新译文<small class="pull-right"><a href="{% url 'translations:list' %}">更多 »</a></small>
                    </h3>
                </div>
                <div class="panel-body">
                    {% if articles %}
                        {% with articles.first as article %}
                            <p><h4><a href="{% url 'translations:detail' article.id %}">{{ article.title }}</a></h4>
                            <small><a href="{{ article.recommend_user.profile.get_absolute_url }}">{{ article.recommend_user.profile }}</a> 推荐于 {{ article.recommend_date|naturaltime }}</small></p>
                            <p>{{ article.section_set.first.best_translation.content|striptags|truncatewords:6 }}</p>
                            <hr>
                        {% endwith %}
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    {% with articles|slice:"1:9" as articles %}
                                        {% for article in articles %}
                                        <li><a href="{% url 'translations:detail' article.id %}">{{ article.title }}</a></li>
                                        {% endfor %}
                                    {% endwith %}
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    {% with articles|slice:"9:" as articles %}
                                        {% for article in articles %}
                                        <li><a href="{% url 'translations:detail' article.id %}">{{ article.title }}</a></li>
                                        {% endfor %}
                                    {% endwith %}
                                </ul>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            <img data-src="holder.js/616x70" style="margin-top: -10px; margin-bottom: 10px">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        待译原文<small class="pull-right"><a href="{% url 'translations:untranslated' %}">更多 »</a></small>
                    </h3>
                </div>
                <div class="panel-body" id="untranslated">
                    {% for article in untranslated %}
                        {% if forloop.counter0 %}<hr>{% endif %}
                        <h4><a href="{% url 'translations:detail' article.id %}">{{ article.original_title }}</a></h4>
                        <h5>{{ article.title }} (
                        {% with article.translate_rate as translate_rate %}
                            {% if translate_rate > 0 %}
                                已翻译{{ translate_rate }}%
                            {% else %}
                                未翻译
                            {% endif %}
                        {% endwith %}
                        )</h5>
                        <small><a href="{{ article.recommend_user.profile.get_absolute_url }}">{{ article.recommend_user.profile }}</a> 推荐于 {{ article.recommend_date|naturaltime }}</small>
                        <p>{{ article.section_set.first.content|striptags|truncatewords:50 }}</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <img data-src="holder.js/294x70" style="margin-bottom: 10px">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        热门标签
                        <small class="pull-right"><a href="{% url 'translations:tags' %}">更多 »</a></small>
                    </h3>
                </div>
                <div class="panel-body">
                    {% for tag in tags %}
                    <a href="{% url 'translations:tag' tag.id %}" class="label label-info">{{ tag.name }} ({{ tag.num_articles }})</a>
                    {% endfor %}
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">文章分类</h3>
                </div>
                <div class="list-group">
                    {% for category in categories %}
                    <a href="{% url 'translations:list' category.id %}" class="list-group-item">{{ category.name }}<span class="badge">{{ category.num_articles }}</span></a>
                    {% endfor %}
                </div>
            </div>
            {% if user.is_authenticated %}
                {% include "translations/partial_recommend.html" %}
            {% endif %}
        </div>
    </div>
{% endblock %}